<html>
<head>
    <title>实时数据</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }
        .slider {
            width: 35px;
            height: 35px;
            cursor: pointer;
            position: absolute;
        }
        .devSpan{
            top: 40px;
            position: relative;
            white-space: nowrap;
            color: blue;
        }
        .main-head {
            background: #fff;
            margin-bottom: 0px;
        }

        .chart-outer {
            height: 200px;
        }

        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }

        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        .chart-outer {
            height: 300px;
        }

        .deviceInfo {
            height: 300px;
        }

        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }

        li {
            list-style-type: none;
        }

        .paramDiv {
            width: 100%;
            background: #fff;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">实时数据</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="nodeClick" :tabsign="'d'" :energy="energyType"  zonetype="3" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-row>
                        <el-col :span="10">
                            <div class="deviceInfo">
                                <ul class="attr">
                                    <li>设备名称:　　{{device.DeviceName}}</li>
                                    <li>设备编号:　　{{device.DeviceID}}</li>
                                    <li>设备类型:　　{{energyType}}</li>
                                    <li>所属区域:　　{{device.zoneName}}</li>
                                    <li>所属部门:　　{{device.DepartmentName}}</li>
                                    <li>设备状态:　　<span v-if="device.online==1">在线</span><span v-else-if="device.online==0">离线</span></li>
                                    <li>最近时间:　　{{device.updateTime}}</li>
                                </ul>
                            </div>

                        </el-col>
                        <el-col :span="14">
                            <div class="chart-outer" id="realChart">

                            </div>
                        </el-col>
                    </el-row>
                    <div class="paramDiv" >
                        <el-row style="flex-wrap: nowrap">
                            <el-col :span="3" v-for="(item,index) in  paramData">
                                <div class="panel panel-f" @click="loadDeviceParam(index)">
                                    <p>{{item.dp_name}}</p>
                                    <h5>{{item.dp_value}}{{item.dp_unitid}}</h5>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </div>
            </el-col>
        </el-row>
    </div>


</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            currentId: '',
            expandId: '',
            number: 0,
            energyType: '',
            device:'',
            paramData:'',
            index:0,
            time1:'',
        },
        methods: {

            nodeClick: function (data) {
                this.currentId = data.dataId;
                var ids =data.id.split('_');
                if (ids[0] == 'D'){
                    this.getDeviceData({deviceId:data.dataId});
                    clearInterval(this.time1)
                    this.time1=setInterval(()=>{
                        this.getDeviceData({deviceId:data.dataId});
                    },20000)

                }
            },
            loadDeviceParam(index) {
                this.index = index;
                this.getChart('realChart',this.paramData[index]);

            },
            getChart: function (id, data) {
                let myChart = echarts.init(document.getElementById(id));
                var option = {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: data.dp_name,
                            type: 'gauge',
                            min: 0,
                            max: data.dp_value*1.4,
                            splitNumber: 8,
                            detail: {formatter: data.dp_value+data.dp_unitid},
                            data: [{value: data.dp_value, name: data.dp_name}],
                            radius: "100%", //仪表大小
                        }
                    ]
                };
                myChart.setOption(option);
            },
            getDeviceData(params){
                HttpUtil.get('device/getById',params).success((res)=>{
                         this.device = res.data
                         HttpUtil.get('device/Monitor',params).success((res)=>{
                             this.paramData = res.data
                             this.getChart('realChart',this.paramData[this.index]);
                         })
                })
            }
        },
        created: function () {
            this.energyType = HttpUtil.getQueryString('energyType');
        },
        mounted: function () {
        },
        destroy:function () {
            this.time1 = null;
        }
    });


</script>

</body>
</html>
